<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>折线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 影音分析系统 <span
        class="c-gray en">&gt;</span> 柱状图 <a class="btn btn-success radius r"
                                                style="line-height:1.6em;margin-top:3px"
                                                href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="f-14 c-error">特别声明：ApacheEchart 是一个基于 JavaScript 的开源可视化图表库，仅免费提供给个人学习、个人网站，如果在商业项目中使用，请去Apache
        Echart官网网站购买商业授权。或者您也可以选择其他免费的第三方图表插件，例如HighChart。华清远见不承担任何版权问题。
    </div>

    <div><br>
        <hr>
        <br></div>
    <div id="container" class="cur" style="min-width:960px;height:400px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>

<!--以下导入前端组件库-->
<!--
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0/echarts.min.js" type="application/javascript"></script>
-->

<!--引入公共的组件库，减少屎山代码-->
<script src="js/commons/commonlibs.js"></script>
<script src="js/auth/auth.js"></script>

<script type="module">

    let flag = await checkCurrentUserLoginStatus();
    flag = JSON.parse(flag);

    if(!flag){ //表示当前用户没有登录
        window.location.href = 'login.html';
    }

    let chartDom = document.getElementById('container');
    let myChart = echarts.init(chartDom);
    let app = {};

    let option;
    option = {
        title: {
            text: '视频播放Top10柱状图',
            left: '10%'	//可以定义
        },
        legend: {
            right: '10%'
        },
        tooltip: {},
        dataset: {
            dimensions: [
                { name: 'videoId', displayName: '视频ID' },
                { name: 'view', displayName: '播放量' }
            ],

            source: [
                 /*
                {videoId: '1dmVU08zVpA', views: 545676},
                {videoId: '4dmVU08zVYS', views: 54667},
                {videoId: '6dmVU074VpS', views: 342545},
                {videoId: '576VU074VpS', views: 122545},
                {videoId: 'deRVU074VpS', views: 232545},
                {videoId: '890VU074VpA', views: 342545},
                {videoId: '6dmVU074Vpv', views: 192545},
                {videoId: '6dmVU074Vpj', views: 42545},*/
            ]
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0, //这个是字体距离
                rotate: 360,  //倾斜角度
                formatter(val) {
                    return '{a|' + `${val.slice(0, 4)}\n${val.slice(4)}` +'}'
                },
                rich: {
                    a: {
                        height: 12, // 设置字体行高
                    }
                }
            }
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                color: '#4295cd'	//可以改变颜色
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }


    function queryTopTenVideoInfoList(){

        queryTopTenVideoList().then(resp=>{
            console.log(resp);
            if(resp.data.code === 200){
               option.dataset.source =  resp.data.data;
                //动态刷新；
                setTimeout(() => {
                    //myChart.setOption(option, true);
                    myChart.setOption(option, {replaceMerge: ['source']}, true)
                    myChart.hideLoading();
                }, 1000)
            }
        })
    }

    //图表的动态刷新
    window.onload = function () {
        //initChinaEchartMap();
        queryTopTenVideoInfoList();
    }


    //queryTopTenVideoInfoList();
</script>
</body>
</html>